<template>
  <view class="encryption-all">
    <!-- 加密 -->
    <view class="encryption" v-if="switching">
      <uni-section title="文本加密" type="line" padding>
        <view class="encryption-keywords">
          <view class="keywords">
            <view>加密关键字：</view>
          </view>
          <uni-easyinput
            v-model="encryptionKey"
            ref="enckey"
            type="number"
            placeholder="请输入加密关键字，此项为可选项"
          ></uni-easyinput>
        </view>
        <view class="encryption-content">
          <view class="content">
            <view>加密内容：</view>
          </view>
          <view  class="easyinput">
            <uni-easyinput
            type="textarea"
            ref="enctex"
            v-model="encryptionText"
            :trim="true"
            autoHeight
            placeholder="请在此输入需要加密的文本"
          ></uni-easyinput>
          </view>
        </view>
        <!-- 加密后的内容 -->
        <view class="encryption-content">
          <view class="content">
            <view>加密后的内容：</view>
          </view>
          <uni-easyinput
            v-model="encryptionContent"
            :disabled="!encryptionContent || encryptionDisabled"
            placeholder="加密后的内容会在这里显示"
          ></uni-easyinput>
        </view>
      </uni-section>
      <view class="encryption-btn" style="margin-left: 40%">
        <van-button 
          round 
          type="info" 
          size="small" 
          @click="getEncryption()"
          >点击加密</van-button>
        <van-button 
          style="margin-left: 10%;" 
          round 
          type="info" 
          size="small" 
          @click="switching = false"
          >切换加/解密</van-button>
      </view>
    </view>
    <!-- 解密 -->
    <view class="encryption" v-else>
      <uni-section title="文本解密" type="line" padding>
        <view class="encryption-keywords">
          <view class="keywords">
            <view>解密关键字：</view>
          </view>
          <uni-easyinput
            v-model="decryptionKey"
            ref="deckey"
            type="number"
            placeholder="必须与加密关键字保持一致"
          ></uni-easyinput>
        </view>
        <view class="encryption-content">
          <view class="content">
            <view>解密内容：</view>
          </view>
          <view  class="easyinput">
            <uni-easyinput
            type="textarea"
            ref="dectex"
            v-model="decryptionText"
            :trim="true"
            autoHeight
            placeholder="请在此输入需要解密的文本"
          ></uni-easyinput>
          </view>
          
        </view>
        <!-- 解密后的内容 -->
        <view class="encryption-content">
          <view class="content">
            <view>解密后的内容：</view>
          </view>
          <uni-easyinput
            v-model="decryptionContent"
            :disabled="!decryptionContent || decryptionKeyDisabled"
            placeholder="解密后的内容会在这里显示"
          ></uni-easyinput>
        </view>
      </uni-section>
      <view class="encryption-btn" style="margin-left: 40%">
        <van-button 
          round 
          type="info" 
          size="small" 
          @click="getDecryption"
          >点击解密</van-button>
        <van-button 
          style="margin-left: 10%;" 
          round 
          type="info" 
          size="small" 
          @click="switching = true"
          >切换加/解密</van-button>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins";
export default {
  name: 'Encryption',
  mixins: [mixin],
  data() {
    return {
      // 加密相关
      encryptionText: '',
      encryptionKey: '',
      encryptionContent: '',
      // showSheet:false,
      encryptionDisabled: true,
      // 解密相关
      decryptionText: '',
      decryptionKey: '',
      decryptionContent: '',
      decryptionDisabled: true,
      switching:true
    }
  },
  methods: {
    // 加密
    async getEncryption() {
      // console.log(this.encryptionText,this.encryptionKey)
      // 关键字和内容全部为空或只输入关键字内容为空
      if (
        (!this.encryptionText && !this.encryptionKey) ||
        (this.encryptionKey && !this.encryptionText)
      ) {
        this.$refs.enctex.focus = true
        return this.$msg('请输入需要加密的文本')
      }
      // 判断是否为纯数字 此项判怕一些手机不会调用数字键盘，所以添加一个判断
      if (isNaN(this.encryptionKey)) {
        this.$refs.enckey.focus = true
        return this.$msg('加密关键字必须为1-8位纯数字')
      }
      const res = this.encryptionKey
        ? await this.$http.get(
            `jm?key=${this.encryptionKey}&string=${this.encryptionText}`
          )
        : await this.$http.get(`jm?string=${this.encryptionText}`)
      if (res.success) {
        // console.log(res)
        // this.showSheet = true
        // 回显到下边的输入框中
        this.encryptionDisabled = false
        this.encryptionContent = res.enmissString
        this.encryptionText = this.encryptionKey = ''
      }
    },
    // 解密
    async getDecryption() {
      if (
        (!this.decryptionText && !this.decryptionKey) ||
        (this.decryptionKey && !this.decryptionText)
      ) {
        this.$refs.dectex.focus = true
        return this.$msg('请输入需要解密的文本')
      }
      const res = this.decryptionKey
        ? await this.$http.get(
            `jm?key=${this.decryptionKey}&string=${this.decryptionText}&type=de`
          )
        : await this.$http.get(`jm?string=${this.decryptionText}&type=de`)
      // 判断是否为纯数字
      if (isNaN(this.decryptionKey) || !res.demissString) {
        this.$refs.deckey.focus = true
        return this.$msg(
          '解密关键字必须为1-8位纯数字且和加密关键字保持一致或请确认解密内容是否正确',
          2500
        )
      }
      if (res.success) {
        // console.log(res)
        // this.showSheet = true
        // 回显到下边的输入框中
        this.decryptionDisabled = false
        this.decryptionContent = res.demissString
        this.decryptionText = this.decryptionKey = ''
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.encryption-all {
  // 加密
  .encryption {
    .encryption-keywords {
      display: flex;
      .keywords {
        // 左侧字体样式
        margin-top: 22rpx;
      }
    }
    .encryption-content {
      display: flex;
      margin-top: 40rpx;
      .content {
        margin-top: 22rpx;
      }
      .easyinput {
        width: 622rpx;
        margin-left: 26rpx;
      }
    }
    .encryption-btn {
      margin-top: 20rpx;
      padding-bottom: 20rpx;
    }
  }
}
</style>
